<template>
     <div class="search">
        <div class="block">
<!-- 选择框 -->
            <el-cascader v-model="val" :placeholder="holderName" :options="options" filterable @change="handleItemChange()"></el-cascader>
<!-- 搜索框 -->
     <div style="margin-top: 15px;">
       <el-input placeholder="请输入内容" v-model="input" class="input-with-select" >
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="学生id" value="1" ></el-option>
          <el-option label="学号" value="2"></el-option>
          <el-option label="姓名" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="requestCode"></el-button>
      </el-input>
    </div>
<!-- 显示el-option中value值1,2,3  <h6>{{select}}</h6> -->
<!-- 个人学生信息列表 -->
      <div class='tabMsg' v-show="isActive" >
              <table class="gridtable">
                <thead>
                  <tr>
                    <th style="border:1px solid black">姓名</th>
                    <th style="border:1px solid black">图片</th>
                    <th style="border:1px solid black">操作</th>
                  </tr>
                </thead>
                <tbody> 
                <tr v-for='item in stuList'>
                  <td><h4>{{item.name}}</h4></td>
                  <td><img :src="item.icon" alt=""></td>
                  <td>
                     <p>
                       <el-button class="btn" type="text" @click="open5">修改</el-button>                     
                    </p>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
<!--根据ID查询学生个人信息 -->
             <div class='tabMsg' v-show="isId" >
              <table class="gridtable">
                <thead>
                  <tr>
                    <th style="border:1px solid black">姓名</th>
                    <th style="border:1px solid black">图片</th>
                    <th style="border:1px solid black">操作</th>
                  </tr>
                </thead>
                <tbody> 
                <tr >
                  <td><h4>{{stuObj.name}}</h4></td>
                  <td><img :src="stuObj.icon" alt=""></td>
                  <td>
                     <p>
                       <el-button class="btn" type="text" @click="open5">修改</el-button>                     
                    </p>
                  </td>
                </tr>
                </tbody>
              </table>
            </div> 
<!-- 学生信息列表 -->
            <div class='tabMsg'  v-show="isShow">
              <table class="gridtable">
                <thead>
                  <tr>
                    <th style="border:1px solid black">姓名</th>
                    <th style="border:1px solid black">图片</th>
                    <th style="border:1px solid black">操作</th>
                  </tr>
                </thead>
                <tbody> 
                <tr v-for='item in clasList'>
                  <td><h4>{{item.name}}--{{item.id}}</h4></td>
                  <td><img :src="item.icon" alt=""></td>
                  <td>
                     <p>
                       <el-button class="btn" type="text" @click="open5(item.id)">修改</el-button>                     
                    </p>
                  </td>
                </tr>
                </tbody>
              </table>
            </div>
<!-- 后台接口搜索关键字 -->
<!-- <h1>{{val[1]}}</h1>  年级ID -->
<!-- <h1>{{val[1]}}</h1>  班级ID
        </div> -->
<!-- 班级相册列表 -->
            <div class='clasPhotos' v-show="isClasPhoto" >  
             <img :src="imgSrc" alt="" @click='jumpTo(val[1])' style='width:1.2rem;height:1.2rem;float:left;'>
             <el-button type="danger" icon="el-icon-delete" circle @click='clasPhotoesDel' style='float:right;'></el-button>
            </div> 
              <ul >
                <li v-for="(item,i) in photosList"  > 
                  <p style='font-size:.5rem'>{{item.titl}}</p>
                  <p style='color:#FED304'>{{item.time}}</p>  
                  <p style='font-size:.3rem'>{{item.text}}</p> 
                  <input type="checkbox" ref='Cid'  :id='item.id'>
                  
                  <div  v-for="data in item.srcs" > 
                    <!-- <div class='img'> -->
                      <img :src="data.src" @click='pushTo(item.id,item.srcs)'  >  
                       <!-- //@click='jumpTo(i)' -->
                      <p style='color:red;' @click='clasPhotoDel(data.id)'>X</p>
                     <!-- </div> -->
                      <!-- <span>{{item.titl}}{{item.time}}</span> -->
                    </div>
                </li>              
              </ul>
            
     </div>
</template>
<script>    
import StuPhotoComponent from './StuPhotoComponent'
    export default{
        data(){
            return {
                // 请求后的年级班级信息===》options
              myData: [],
                // 搜索框渲染数据
             options: [],
                //年级和班级对象
                vals:[],
                //gradId clasId
                val: [],  
                //学生列表
                clasList:[], 
                 //个人学生列表
                stuList:[],
                stuObj:{},
                //显示表格控制
                isShow:false,
                //控制按学号和姓名查询的表格显示
                isActive:false,
                //控制按id查询的表格显示
                isId:false,
                isClasPhoto:false,
                // 相册列表
                photosList:[],
                  input: '',
                  select: '',
                  title:'',
                  desc:'',
                  type:'',
                  date:'',
                  cid_arr:[],
                  imgSrc:require('../assets/img/clasp.png')

            }
        },
        methods:{
          jumpTo(id){
            this.$router.push({path:'/index/reset/clapl',query:{id}});
          },
          pushTo(id,imgs){
            this.$router.push({path:'/index/reset/clapu',query:{id,imgs}});
          },
          newload(){
            return new Promise((resolve)=>{
              resolve(()=>{
                return new Promise(()=>{
                  resolve();
                })
              });
            })
          },
          aa(){
            this.newload().then(()=>{
              this.upload();
              console.log('&&&&&&&&&&&****************$$$$$$$$$$$$$$$$$$$$$');
            }).then(()=>{
               this.clasPhotos();
              console.log('&&&&&&&&&&&********++++++++++++++++********$$$$$$$$$$$$$$$$$$$$$');
            })
          },
         
          clasPhotoDel(id){
                var url="http://125.210.160.93:8080/SmEdu/priv/clasPhotSrc/doDelete";
                this.$http.post(url,{id}).then((res)=>{
                 console.log(res);
                 console.log(res.data.body);
                   this.clasPhotos();
               }).catch((err)=>{
                 console.log(err);
               })
          },
          clasPhotoesDel(){
            console.log(this.$refs.Cid);
            var input_arr=this.$refs.Cid;         
            for(var i=0;i<input_arr.length;i++){
              if(input_arr[i].checked){
                 console.log(input_arr[i].checked);              
                   console.log(input_arr[i].id);               
                this.cid_arr.push(input_arr[i].id);
              }
            }
            console.log(this.cid_arr);
               var url="http://125.210.160.93:8080/SmEdu/priv/clasPhot/doDeletes";
                this.$http.post(url,{ids:this.cid_arr}).then((res)=>{
                 console.log(res);
                  this.clasPhotos();
               }).catch((err)=>{
                 console.log(err);
               })
               this.cid_arr=[];
               this.$refs.Cid.checked=false;
          },
//搜索改变时触发的函数
            handleItemChange() {
                  this.vals=getCascaderObj(this.val, this.options);  
                  //console.log(this.val); 
                  //console.log(this.options) ; 
//学生列表页显示表格
                  if(this.holderName=='请选择学生'){
                  this.requsetGrd();  
                  this.isShow=true;
                  this.isActive=false;
                  this.isId=false;
                  // 班级相册页显示相册列表
                  }else if(this.holderName=='请选择班级'){
                  this.clasPhotos();
                  this.isClasPhoto=true;
                  }
                },
            handleEdit(index, row) {
                     console.log(index, row);
                 },
            handleDelete(index, row) {
                    console.log(index, row);
            },
//请求班级列表函数
            requsetGrd(){
               var url="http://125.210.160.93:8080/SmEdu/port/scho/studList";
               this.$http.post(url,{clasId:this.val[1]}).then((res)=>{
                 console.log(res);
                 console.log(res.data.body);
                 this.clasList=res.data.body;
               }).catch((err)=>{
                 console.log(err);
               })
            },
//请求班级相册函数
            clasPhotos(){
              var url="http://125.210.160.93:8080/SmEdu/port/clas/photAll";
               console.log(this.val[1]);
              this.$http.post(url,{clasId:this.val[1]}).then((res)=>{
                console.log(this.val[1]);
                console.log(res.data.body);
                this.photosList=res.data.body;
                //this.photoList=res.data.body.srcs;
              }).catch((err)=>{
                console.log(err)
                })
            },
//修改学生信息函数
             open5(id) {
              //  console.log('...........................');
              //  console.log(this.$store.state.num);
              //  console.log(id);
              //  this.$store.state.head_portrait_id=id;
                    const h = this.$createElement;
                    this.$msgbox({
                    title: '修改学生信息',
                    message: h('p', null, [
                        h('stu-photo-component',null),[
                          h('h6',id)
                        ]
                    ]),                
                    showCancelButton: true,
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    center:true,
                    callback(){
                      console.log(111);
                    },
                    // type:'info',
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                        instance.confirmButtonLoading = true;
                        instance.confirmButtonText = '执行中...';
                        setTimeout(() => {
                            done(console.log(2222));
                            //执行刷新学生列表
                            this.requsetGrd();
                            setTimeout(() => {
                            instance.confirmButtonLoading = false;
                            }, 300);
                        }, 1000);
                        } else {
                        done(console.log(33333));
                        }
                    }
                    }).then(action => {
                    this.$message({
                        type: 'info',
                        message: 'action: ' + action
                    });
                    });
                },
//相册跳回未完成
                //jumpTo(i){
                // this.$router.push({path:'/index/reset/clapl',query:{id:i}})
                //},
//根据学生信息查询学生
                requestCode(){
//根据ID查询学生
                  if(this.select==1){
                     var url="http://125.210.160.93:8080/SmEdu/pass/stu/findById";
                     this.$http.post(url,{schoId:19,studId:this.input}).then((res)=>{
                     console.log(res.data.body);
                     this.stuObj=res.data.body;
                     this.isId=true;
                     this.isActive=false;
                     this.isShow=false;
                   }).catch((err)=>{
                     console.log(err);
                   })
//根据学号查询学生
                  }else if(this.select==2){
                    var url="http://125.210.160.93:8080/SmEdu/pass/stu/findByCode";
                    this.$http.post(url,{schoId:19,studCode:this.input}).then((res)=>{
                    console.log(res.data.body);
                    this.stuList=res.data.body;
                    this.isActive=true;
                    this.isShow=false;
                    this.isId=false;
                   }).catch((err)=>{
                     console.log(err);
                   })
//根据姓名查询学生
                  }else if(this.select==3){
                    var url="http://125.210.160.93:8080/SmEdu/pass/stu/findByName";
                    this.$http.post(url,{studName:this.input}).then((res)=>{
                    console.log(res.data.body);
                    this.stuList=res.data.body;
                    this.isActive=true;
                    this.isShow=false;
                    this.isId=false;
                   }).catch((err)=>{
                     console.log(err);
                   })
                  }
                  this.input='';
                }
          },  
            async mounted(){
              //console.log('mounted')
//请求年级数据
              var url="http://125.210.160.93:8080/SmEdu/port/scho/gradList";
              var {data} =  await this.$http.post(url,{schoId:19}) 
             // console.log(data)
              for(var i=0 ;i< data.body.length;i++){
                this.myData.push(
                  {
                    value: data.body[i].id,
                    label: data.body[i].name,
                    children: []
                  })
              }
// 请求班级数据
          this.myData.forEach(async (element,index) => {
              //console.log('value1:'+element.value)
               //console.log('value1:'+element.value)
              var url="http://125.210.160.93:8080/SmEdu/port/scho/clasList";
              var {data} =  await this.$http.post(url,{gradId: element.value})
               //console.log('value2:'+element.value)
              // console.log(index);
              //console.log(data);
              for(var i=0 ;i < data.body.length;i++){
                    this.myData[index].children.push(
                          {
                            value: data.body[i].id,
                            label: data.body[i].name
                          }
                      )
              }            
          });    
      this.options = this.myData;     
    },    
        props:['holderName'],   
        components:{
          StuPhotoComponent
        },
  
    }

    //options[{label},{label},{label},{label}]=arr[1,2,3,4];
    
   function  getCascaderObj(val,opt) {
            return val.map(function (value, index, array) {
                for (var itm of opt) {
                    if (itm.value == value) { opt = itm.children; return itm; }
                }
                return null;
            });
        }
    
</script>
<style scoped>
  option{
    width:100%,
    /* height:200px; */
  }
  table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
  margin:0 auto;
  width:90%;
}
table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.gridtable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
table.gridtable td img{
  width:2.6667rem;
  height:2.6667rem;
}
.search .tabMsg{
  height:13.3333rem;
  /* border:1px solid red;  */
  overflow: hidden;
  overflow-y:scroll;
  margin :1rem auto;
}
.clasPhotos{
  margin:.3rem auto;
  border:1px solid red;
  /* margin-bottom:100px; */
  height:1.5rem;
  width:90%;
  /* height:1100px; */
}
.clasPhotos ul li{
  width:96%;
  /* height:5.7rem; */
  /* background:pink; */
  margin:0.2rem 0.2rem;
  float:left;
  position:relative;
    /* border:1px solid red;  */
}
.clasPhotos ul li img{
  width:4.4rem;
  height:2.7rem;
  float:left; 
  margin:.2rem .2rem;
}
.clasPhotos ul li span{
  position: absolute;
  top:0rem;
  left:0rem;
}

 .el-select .el-input {
    width: 130px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
</style>
